<template>
    <!-- 文章列表 -->
    <div class="sidebar-list">
        <ul class="sidebar-list-content">
            <li
                class="sidebar-list-item"
                v-for="(item, index) in contentList"
                :key="index"
                @click="goArticle(item)"
            >
                <!-- 图片 -->
                <div class="sidebar-article-img">
                    <img :src="item.pic" alt="文章" />
                </div>
                <!-- 标题跟创建时间 -->
                <div class="sidebar-item-content">
                    <div class="title">繁花似锦，百年如歌</div>
                    <div class="date">2023年06月15日</div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import { mixin } from "@/mixins";
export default {
    name: "content-list",
    mixins: [mixin],
    props: ["contentList"],
    methods: {
        goArticle(item) {
            // 文章详情
            this.$router.push({ path: `article-item/${item.id}` });
        },
    },
};
</script>
<style lang="scss" scoped>
@use "../assets/css/sidebar-list.scss";
</style>
